<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 500px;
        height: 400px;
        position: relative;
        border: 1px solid #ccc;
    }
    a{
        display: none;
        width: 500px;
        height: 400px;
        color: #fff;
        text-align: center;
        /*字体粗细  字体大小/行高 字体*/
        font: 700 100px/400px '宋体';
    }
    ul{
        position: absolute;
        bottom: 30px;
        left: 50%;
        list-style: none;
        margin-left: -55px;
    }
    li{
        float: left;
        width: 18px;
        height: 18px;
        background: #000;
        margin: 0 2px;
        cursor: move;
        border-radius: 9px;
        clear: #fff;
        text-align: center;
        line-height: 18px;
    }
    .arrow span{
        position: absolute;
        top: 50%;
        width: 38px;
        height: 60px;
        color: #fff;
        text-decoration: none;
        font: 700 36px/60px '宋体';
        text-align: center;
        background: rgba(0, 0, 0, .3);
        margin-top: -30px;
        cursor: pointer;
    }
    #arrow-l{
        left: 0;
    }
    #arrow-r{
        right: 0;
    }
    .arrow span:hover{
        background: rgba(0, 0, 0, .8);
    }
    .current{
        background: #f00;
    }
    .show{
        display: block;
    }
</style>
<body>
    <div class="box" id="box">
        <a href="#" style="background: #00f" class="show">1</a>
        <a href="#" style="background: purple">2</a>
        <a href="#" style="background:#0f0">3</a>
        <a href="#" style="background:pink">4</a>
        <a href="#" style="background:yellow">5</a>
        <ul>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="arrow">
            <span href='#' id="arrow-l">&lt;</span>
            <span href='#' id="arrow-r">&gt;</span>
        </div>
    </div>
</body>
<script>
    var aArr=document.getElementsByTagName('a')
    var liArr=document.getElementsByTagName('li')
    var spArr=document.getElementsByTagName('span')
    var box=document.getElementById('box')
    var count=0;
    console.log(spArr)
    // 右边大于号
    spArr[1].onclick=fn1
    // 左边小于号
    spArr[0].onclick=fn2
    var timer=setInterval(fn1,1000)
    box.onmouseover=function(){
        clearInterval(timer)
    }
    box.onmouseout=function(){
        timer=setInterval(fn1,1000)
    }
    for(var i=0;i<liArr.length;i++){
        liArr[i].onclick=fn3
    }
    // 右边
    function fn1(){
        count++;
        if(count===aArr.length){
            count=0;
        }
        for(var i=0; i<aArr.length;i++){
            aArr[i].className=''
            liArr[i].className=''
        }
        aArr[count].className='show'
        liArr[count].className='current'
    }
    // 左边
    function fn2(){
        count--;
        if(-1==count){
            count=aArr.length-1
        }
        for(var i=0; i<aArr.length;i++){
            aArr[i].className=''
            liArr[i].className=''
        }
        aArr[count].className='show'
        liArr[count].className='current'
    }
    function fn3(){
        for(var i=0;i<aArr.length;i++){
            aArr[i].className=''
            liArr[i].className=''
        }
        aArr[this.innerHTML-1].className='show'
        liArr[this.innerHTML-1].className='current'
    }
</script>
</html>